<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><!--使用Thymeleaf前，最好先导入其名称空间：xmlns:th，不导入会没有提示，但不影响使用-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-------------单条数据展示 begin------------->
<!-- th标签为thymeleaf提供的展示数据标签 .这里输出的是UserTab对象的name属性-->
<div th:text="${userTab.name}">姓名</div>
<!-------------单条数据展示 end------------->


<!-------------多条(列表)数据展示 begin------------->
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody th:remove="all-but-first">
    <tr th:each="userTab : ${userTabList}">
        <td th:text="${userTab.name}">Red chair</td>
        <td th:text="${userTab.age}">30</td>
    </tr>
    </tbody>
</table>
<!-------------多条(列表)数据展示 end------------->

<!--
thymeleaf使用可参考文档 ： http://www.voidme.com/thymeleaf/thymeleaf-display-bean-value

若是后端直接返回页面和结果，而非json数据，则使用thymeleaf；后端数据以json形式提供，使用vue前端渲染

在展示的时候th:text中的值会替换掉div的文本内容，thymeleaf还有个优点，就是使用th符号的html页面在纯静态网站中也可以展示为前端的效果，而不是像jsp那样无法运行
补充说明：vue是前端渲染，后端数据以json形式提供，前后端交互只有纯数据；thymeleaf相当于过去的jsp，当然比jsp先进不少，是后端渲染，后端直接推送的是整个html文档，缺点是服务器压力增大，渲染的东西比较多
-->
</body>
<script th:inline="javascript">
    var user = [[${user}]]
    console.log(user.name + "\t" + user.age);
</script>
</html>